<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <style>
        .form {
            margin-top: 100px;
        }

        #avatar_img {
            margin-left: 20px;
        }

        .error {
            color: red;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="form">
                <form id="form">
                    <h2 class="col-md-offset-5">用户注册</h2>
                    {% csrf_token %}

                    {% for field in form %}
                        <div class="form-group">
                            <label for="{{ field.auto_id }}">{{ field.label }}</label>
                            {{ field }} <span class="error pull-right"></span>
                        </div>

                    {% endfor %}
                    <div class="form-group">
                        <label for="avatar">头像
                            <img width="60" height="60" id="avatar_img" src="/static/img/default.jpg" alt="">
                        </label>

                        <input type="file" id="avatar" style="display: none">
                    </div>

                    <input type="button" class="btn btn-default reg_btn " value="提交">
                </form>
            </div>
        </div>
    </div>
</div>


</body>
<script src="/static/js/jquery.js"></script>
<script>
    // 头像预览
    $("#avatar").change(function () {
        {#alert('123')#}

        // 获取用户选中的文件对象
        var file_boj = $(this)[0].files[0]

        // 获取文件对象路径

        var reader = new FileReader();
        reader.readAsDataURL(file_boj)

        //修改img的src属性，src=文件对象路径
        reader.onload = function () {
            $("#avatar_img").attr("src", reader.result)
        }
    })


    // 基于Ajax提交数据

    $(".reg_btn").click(function () {

        var formdata = new FormData();
        {#formdata.append("user",$("#id_user").val());#}
        {#formdata.append("pwd",$("#id_pwd").val());#}
        {#formdata.append("re_pwd",$("#re_pwd").val());#}
        {#formdata.append("email",$("#id_email").val());#}

        {#formdata.append("csrfmiddlewaretoken",$("[name='csrfmiddlewaretoken']").val());#}

        var request_data = $("#form").serializeArray()
        $.each(request_data, function (index, data) {
            formdata.append(data.name, data.value)
        })
        formdata.append("avatar", $("#avatar")[0].files[0]);


        $.ajax({
            url: "",
            type: "post",
            contentType: false,
            processData: false,
            data: formdata,
            success: function (data) {
                console.log(data)
                if (data.user) {
                    //注册成功
                    location.href = "/login/"
                } else { //注册失败
                    $("span.error").html("");
                    $(".form-group").removeClass("has-error")
                    $.each(data.msg, function (field, error_list) {
                        console.log(field, error_list)
                        if (field == "__all__") {
                            $("#id_re_pwd").next().html(error_list[0]).parent().addClass("has-error");
                        }
                        $("#id_" + field).next().html(error_list[0]);
                        $("#id_" + field).parent().addClass("has-error");

                    })
                }

            }
        })


    })
</script>
</html>